<template>
	<div class="common-layout">
		<el-affix>
			<el-header>
				<label>网上购书商城</label>
				<el-menu :router="true" mode="horizontal" text-color="black" active-text-color="gold" default-active="/home">
					<el-menu-item index="/home">主页</el-menu-item>
					<el-menu-item index="/home/detail">商品详情</el-menu-item>
					<el-menu-item index="/home/cart">购物车</el-menu-item>
					<el-menu-item index="/home/orders">我的订单</el-menu-item>
					<el-menu-item index="/home/information">个人信息设置</el-menu-item>
				</el-menu>
				<el-dropdown>
					<label class="el-dropdown-link">
						<el-avatar :src="`${$Imgurl}/showImg/${img}`"></el-avatar>
						<span @click="open=!open">{{uname}}</span>
					</label>
					<template #dropdown v-if="uname!='未登录'">
						<el-dropdown-menu>
							<el-dropdown-item @click="quit()">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-dialog title="登录" v-model="open" center>
					<el-form>
						<el-form-item>
							<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button @click="login()">登录</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="text" @click="open=false;open2=true">新用户注册</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
				<el-dialog title="注册" v-model="open2" center>
					<el-form>
						<el-form-item>
							<el-input placeholder="请输入账号" v-model="add.account"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input type="password" placeholder="请输入密码" :show-password="true" v-model="add.password"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input type="password" placeholder="请再次输入密码" :show-password="true" v-model="add.n_password"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="请输入用户名" v-model="add.nickname"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="请输入手机号" v-model="add.phone"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button @click="enroll()">注册</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
				<el-dialog title="账号异常···" v-model="open3" center>
					<span>账号处于冻结状态,是否重置密码？</span>
					<template #footer>
						<el-button>取消</el-button>
						<el-button @click="reset()">重置</el-button>
					</template>
				</el-dialog>
			</el-header>
		</el-affix>
		<el-main>
			<router-view></router-view>
		</el-main>
	</div>
</template>

<script>
	import { ElMessage } from 'element-plus'
	import instance from '../../ajax'
	export default{
		name:'Home',
		data(){
			return{
				form:{
					username:'',
					password:'',
					grant_type:'password',
					client_id:'sobook4',
					client_secret:'444444'
				},
				
				open:false,
				uname:'',
				img:'favicon.ico',
				
				open2:false,
				add:{
					account:'',
					password:'',
					n_password:'',
					phone:'',
					nickname:''
				},
				open3:false
			}
		},
		methods:{
			login(){
				let that=this
				let login=this.$qs.stringify(this.form)
				instance.post('/oauth/token',login,{
					headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
				}).then((res)=>{
					if (res.status==200) {
						localStorage.setItem('token',res.data.access_token)
						
						instance.get(`/api/info/getUser`).then((res)=>{
							if (res.data.closed==0) {
								ElMessage({
									showClose: true,
								    message: '登录成功',
								    type: 'success'
								  })
								this.open=!this.open
								localStorage.setItem('uname',res.data.nickname)
								localStorage.setItem('img',res.data.img)
								localStorage.setItem('role',res.data.role)
								this.$router.go(0)
								if (res.data.role==='G') {
									this.$router.push('/admin')
									return
								} else{
									this.$router.push('/')
									return
								}
								
							} else{
								this.open3=true
							}
						}).catch((error)=>{
							
						})
					}
				}).catch((error)=>{
					ElMessage({
					    showClose: true,
					    message: '账号或密码错误',
					    type: 'error',
					  })
					
				})
			},
			enroll(){
				this.open=false
				this.open2=false
				
				if(this.add.uname!=''&&this.add.password!=''&&this.add.n_password==this.add.password&&this.add.phone!=''&&this.add.pname!=''){
					instance.post('/api/public/addUser',this.add,{
						headers:{'Content-Type':'application/json'}
					}).then((res)=>{
						if (res.data.code==200) {
							ElMessage({
								showClose: true,
							    message: '注册成功',
							    type: 'success',
							  })
						}
					}).catch((error)=>{
						
					})
				}
			},
			reset(){
				this.open3=false
				
			},
			quit(){
				localStorage.removeItem('uname')
				localStorage.removeItem('img')
				localStorage.removeItem('role')
				this.$router.push('/home')
				this.$router.go(0)
			}
		},
		created(){
			if(localStorage.getItem('uname')){
				this.uname=localStorage.getItem('uname')
			}else{
				this.uname='未登录'
			}
			this.img=localStorage.getItem('img')
		}
	}
</script>

<style scoped>
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background: deepskyblue;
	}
	.el-menu{
		background: deepskyblue;
		width: 40%;
	}
	.el-form .el-button{
		width: 100%;
		
	}
	label{
		font-weight: bold;
		font-size: 20px;
	}
	.el-dropdown-link span{
		color: gold;
		font-size: 16px;
	}
</style>
